<template>
  <div>
    <div class="relative box intro-y grid 2xl:grid-cols-3 sm:grid-cols-1 gap-5">
      <div class="sm:col-span-1 2xl:col-span-1">
        <el-calendar v-model="selDate">
          <template #date-cell="{ data }">
            <p :class="['date-cell', data.isSelected ? 'is-selected' : '', hasData(data.day) ? 'has-data' : '']">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
              <span v-if="hasData(data.day)">🔴</span>
            </p>
          </template>
        </el-calendar>
      </div>
      <div class="sm:col-span-1 2xl:col-span-2">
        <div class="title text-center p-3">省间价格预测</div>
        <chart :tableData="tableData"/>
      </div>
    </div>
    <div class="grid-cols-1 mt-5 border-t pt-5 intro-y grid 2xl:grid-cols-11 sm:grid-cols-1 gap-5">
      <div class="box sm:col-span-1 2xl:col-span-3">
        <div
            class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">申报记录</h2>

        </div>
        <div class="p-3">
          <record/>
        </div>
      </div>
      <DataBox
          title="申报数据"
          :tableData="tableData"
          @tabChange="(index) => handleTabChange('purchase', index)"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
import chart from "./chart.vue"
import chart1 from "./chart1.vue"
import * as $api from "@/api/api";
import dayjs from "dayjs";
import record from "./record.vue"
import segments from "./segments.vue"
import wTable from "./wTable.vue"
import DataBox from "./dataBox.vue";

// 后台返回的数据
const dateData = ref([
  // {"date": "2024-11-25", "hasData": true},
  // {"date": "2024-11-27", "hasData": true}
]);
const selDate = ref(new Date());
const tableData = ref([]);
// 共享数据
const dataList = ref([]);
const tabIndex = ref(0);

// 处理 tab 切换事件
const handleTabChange = (type, index) => {
  console.log(`Tab changed: ${type}, Index: ${index}`);
};
const getData = (date) => {
  $api.NewEnergyOutputQuery({
    unitKey: "",
    userKey: "admin",
    key: "",
    date: date
  }).then(res => {
    console.log("=>(Main.vue:16) res", res);
    tableData.value = res;
  })
}
watch(selDate, (newVal) => {
  const date = dayjs(newVal).format("YYYY-MM-DD");
  getData(date);
})
// 检查是否有数据
const hasData = (date) => {
  return dateData.value.some((item) => item.date === date);
};
const changeTab = (tab) => {
  console.log("=>(Main.vue:102) tab", tab.index);
  tabIndex.value = tab.index;
}

onMounted(
    () => {
      getData(dayjs(selDate.value).format("YYYY-MM-DD"))
    }
)
</script>

<style lang="scss" scoped>
.import {
  font-size: 20px;
}

.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
}
</style>